<template>
  <div id="AccountIndex">
    <!-- 查询条件 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input
          placeholder="用户名"
          v-model="queryParam.userName"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-input
          placeholder="用户邮箱"
          v-model="queryParam.acEmail"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="6">
        <el-select
          v-model="queryParam.state"
          clearable
          placeholder="账号状态"
          style="width: 100%;"
        >
          <el-option :value="1" label="未锁定"></el-option>
          <el-option :value="2" label="已锁定"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-button @click="getTableData()" type="primary" icon="el-icon-search" plain>查询</el-button>
        <el-button @click="queryParamClean" type="warning" icon="el-icon-refresh" plain>清空</el-button>
      </el-col>
    </el-row>
    <!-- 业务操作按钮组 -->
    <el-row style="margin-top: 10px;">
      <el-col :span="24">
        <el-button @click="dialog.addOrEdit=true" type="success" icon="el-icon-circle-plus-outline" plain>添加用户</el-button>
        <el-button @click="moreDelete" type="danger" icon="el-icon-delete" plain>批量删除</el-button>
        <el-button @click="moreUnlock" type="warning" icon="el-icon-unlock" plain>批量解锁</el-button>
      </el-col>
    </el-row>

    <!-- 数据表格 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-table :data="tableData" border style="width: 100%" @selection-change="tableSelectChange">
                <el-table-column type="selection" width="55" align="center"> </el-table-column>
                <el-table-column prop="userName" label="用户名" width="180"> </el-table-column>
                <el-table-column prop="acEmail" label="邮箱" ></el-table-column>
                <el-table-column prop="state" width="180" label="账号状态">
                    <template slot-scope="scope">
                        <!-- scope.row 得到的是当前行的数据 -->
                        <el-tag v-if="scope.row.state==1" type="success">正常</el-tag>
                        <el-tag v-else type="danger">已锁定</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="220" align="center">
                    <template slot-scope="scope">
                        <el-button @click="toShow(scope.row.accountID)" plain  title="查看" size="mini" icon="el-icon-search"></el-button>
                        <el-button @click="toEdit(scope.row.accountID)"  plain type="warning" size="mini" title="修改" icon="el-icon-edit"></el-button>
                        <el-button @click="toDelete(scope.row.accountID)" plain type="danger" size="mini" title="删除" icon="el-icon-delete"></el-button>
                        <el-dropdown @command="moreMenuSelect">
                            <span class="el-dropdown-link">
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item :command="'changePWD:'+scope.row.accountID">修改密码</el-dropdown-item>
                                <el-dropdown-item :command="'unLock:'+scope.row.accountID">解除锁定</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>

    <!-- 分页工具 -->
    <el-row>
        <el-col :span="24">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageParam.page"
                :page-sizes="[10, 30, 60, 100]"
                :page-size="pageParam.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageParam.total">
            </el-pagination>
        </el-col>
    </el-row>
    
    <!-- 新增\修改用户信息弹窗 -->
    <el-dialog
    :title="(isEdit==true?'编辑':'新增')+'用户'"
    :visible.sync="dialog.addOrEdit"
    :close-on-click-modal="false"
    :show-close="false"
    width="50%"
    >
    <el-form ref="accountAddOrEditForm" :rules="formRules" :model="addOrEditFormData" label-width="80px">
        <el-form-item label="用户名" prop="userName">
            <el-input v-model="addOrEditFormData.userName" placeholder="请填写用户名" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="acEmail">
            <el-input v-model="addOrEditFormData.acEmail" placeholder="请填写关联邮箱" maxlength="35" show-word-limit></el-input>
        </el-form-item>
        <el-form-item v-if="!isEdit" label="设置密码" prop="acpwd">
            <el-input type="password" :show-password="true" v-model="addOrEditFormData.acpwd" placeholder="请设置一个密码，可以包含复杂标识符" show-word-limit maxlength="35"></el-input>
        </el-form-item>
        <el-form-item v-if="!isEdit" label="确认密码" prop="acpwd2">
            <el-input type="password" :show-password="true" v-model="addOrEditFormData.acpwd2" placeholder="确定您设置的密码" maxlength="35" show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
            
            <el-button  plain @click="formClose">关闭</el-button>
            <el-button type="warning" plain @click="formRest">重置</el-button>
            <el-button type="primary" @click="doSaveAccount">保存</el-button>
        </el-form-item>
    </el-form>
    </el-dialog>

    <!-- 查看弹窗组件 -->
    <el-dialog
    title="用户详情"
    :visible.sync="dialog.show"
    :close-on-click-modal="false"
    :show-close="false"
    width="50%"
    >
    <el-descriptions :title="showData.userName" :column="3" border >
        <template slot="extra">
            <el-button type="primary" size="small" @click="closeShowData">关闭</el-button>
        </template>
        <el-descriptions-item label="邮箱">{{ showData.acEmail }}</el-descriptions-item>
        <el-descriptions-item label="账号状态">
            <el-tag v-if="showData.state==1" type="success">正常</el-tag>
            <el-tag v-else type="danger">已锁定</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="密码错误次数">{{ showData.cwCount }}</el-descriptions-item>
    </el-descriptions>
    </el-dialog>

    <!-- 修改密码弹窗 -->
    <el-dialog
    title="修改密码"
    :visible.sync="dialog.changePWD"
    :close-on-click-modal="false"
    :show-close="false"
    width="50%"
    >
    <el-form ref="accountChangePWDForm" :rules="changePwdformRules" :model="changePWDFormData" label-width="100px">
        <el-form-item label="旧密码" prop="oldPwd">
            <el-input type="password" :show-password="true" v-model="changePWDFormData.oldPwd" placeholder="请填写用户名" maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="设置新密码" prop="newPwd"> 
            <el-input type="password" :show-password="true" v-model="changePWDFormData.newPwd" placeholder="请设置一个密码，可以包含复杂标识符" show-word-limit maxlength="35"></el-input>
        </el-form-item>
        <el-form-item  label="确认新密码" prop="newPwd2">
            <el-input type="password" :show-password="true" v-model="changePWDFormData.newPwd2" placeholder="确定您设置的密码" maxlength="35" show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
            <el-button  plain @click="changePwdFormClose">关闭</el-button>
            <el-button type="warning" plain @click="changePwdFormRest">重置</el-button>
            <el-button type="primary" @click="doSavePwdChange">保存</el-button>
        </el-form-item>
    </el-form>
    </el-dialog>

  </div>
</template>

<script>
import * as accountAPI from '@/api/account.js';
export default {
  name: "AccountIndex",
  data() {

    // 自定义表单验证函数 ！！！！！
    var yanZhengPWD = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.addOrEditFormData.acpwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
    };

    var yanZhengPWDForChange = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.changePWDFormData.newPwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
    };

    return {
      ld:false,
      // 是否是修改
      isEdit:false,
      // 页面中弹窗状态
      dialog:{
        addOrEdit:false,
        show:false,
        changePWD:false
      },
      // 查询参数
      queryParam: {
        userName: null,
        acEmail: null,
        state: null
      },
      // 分页参数
      pageParam:{
        size:10, // 每页显示的行数
        page:1, // 当前访问的页码
        total:100 // 总条目数
      },

      tableData: [],
      // 数据添加时表单信息
      addOrEditFormData:{
        userName:null,
        acpwd:null,
        acpwd2:null,
        acEmail:null
      },
      // 查看时详情数据
      showData:{
        userName:null,
        acEmail:null,
        state:null,
        cwCount:0
      },
      // 用户新增表单提交验证规则
      formRules:{
        userName:{ required: true, message: '请输入用户名', trigger: 'blur' },
        acpwd:{ required: true, message: '请输入密码', trigger: 'blur' },
        acpwd2:{ validator:yanZhengPWD, trigger: 'blur' },
        acEmail:{ required: true, message: '请输入邮箱地址', trigger: 'blur' }
      },
      // 修改密码表单验证规则
      changePwdformRules:{
        oldPwd:{ required: true, message: '请输入旧密码', trigger: 'blur' },
        newPwd:{ required: true, message: '请输入新密码', trigger: 'blur' },
        newPwd2:{ validator:yanZhengPWDForChange, trigger: 'blur' },
      },
      // 当前表格选中的数据
      nowTableSelectedList:[],
      // 修改密码表单数据
      changePWDFormData:{
        accountID:null,
        oldPwd:null,
        newPwd:null,
        newPwd2:null
      }
    };
  },
  mounted(){
    this.getTableData();
  },
  methods:{
    // 查询数据表格
    getTableData(){
      
      let _this = this;
      accountAPI.page(_this.queryParam, _this.pageParam)
      .then(function(res){
          if(res.code == "0000"){
              
              _this.tableData = res.data.rows;
              _this.pageParam.page = res.data.page;
              _this.pageParam.total = res.data.total;
              _this.pageParam.size = res.data.pageSize;

          }
      });

    },
    // 清空查询条件
    queryParamClean(){
      this.queryParam = {
        userName: null,
        acEmail: null,
        state: null
      };

      this.getTableData();
    },
    // 当每页显示的行数切换
    handleSizeChange(data){
        this.pageParam.size = data;

        // 调用查询分页数据操作
        this.getTableData();

    },
    // 切换页码时
    handleCurrentChange(data){
        this.pageParam.page = data;

        // 调用查询分页数据操作
        this.getTableData();
    },
    // 关闭新增用户弹窗
    formClose(){
        this.dialog.addOrEdit = false;
        this.addOrEditFormData = {
            userName:null,
            acpwd:null,
            acpwd2:null,
            acEmail:null
        };
        this.isEdit = false;
    },
    // 关闭详情查看弹窗
    closeShowData(){
        this.showData = {
        userName:null,
        acEmail:null,
        state:null,
        cwCount:0
      }

        this.dialog.show = false;
    }, 
    // 重置新增用户表单
    formRest(){
        this.addOrEditFormData = {
            userName:null,
            acpwd:null,
            acpwd2:null,
            acEmail:null
        }
    },
    // 提交新增用户表单
    doSaveAccount(){
        // 进行表单验证
        this.$refs.accountAddOrEditForm.validate((valid) => {
          if (valid) {
            // 登录功能
            this.submitAddOrEdit();

          } else {
            return false;
          }
        });
    },
    // 提交表单axios
    submitAddOrEdit(){
      if(this.isEdit){// 编辑
        let _this = this;
        accountAPI.update(_this.addOrEditFormData)
        .then(function(res){
            if(res.code == "0000"){
              _this.formClose();
              _this.getTableData();
            }
        });
      }else{ // 新增
        let _this = this;
        accountAPI.add(_this.addOrEditFormData)
        .then(function(res){
            if(res.code == "0000"){
              _this.formClose();
              _this.getTableData();
            }
        });
      }
    },
    // 提交删除axios
    submitDelete(pkID){
      let _this = this;
        accountAPI.deletes(pkID)
        .then(function(res){
            if(res.code == "0000"){
              _this.getTableData();
            }
        });
    },
    // 提交解锁axios
    submitUnlock(pkID){
      let _this = this;
        accountAPI.unclocks(pkID)
        .then(function(res){
            if(res.code == "0000"){
                 // 2. 赋值给修改表单数据
                 _this.getTableData();
            }
        });
    },
    // 提交修改密码axios
    submitChangePWD(){
      let _this = this;
        accountAPI.updatePwd(_this.changePWDFormData)
        .then(function(res){
            if(res.code == "0000"){
                 
                _this.changePwdFormClose();

                 _this.getTableData();
            }
        });
    },
    // 操作栏-编辑
    toEdit(pkID){

        // 1. 后端查询当前行的数据进行更新（不要拿前端的数据更新）

        let _this = this;
        accountAPI.getByID(pkID)
        .then(function(res){
            if(res.code == "0000"){
                 // 2. 赋值给修改表单数据
                _this.addOrEditFormData = res.data;
            }
        });

        // 3. 告诉弹窗现在是修改时间
        this.isEdit = true;

        // 4. 打开修改弹窗
        this.dialog.addOrEdit = true;
        

    },
    // 操作栏-查看
    toShow(pkID){

        let _this = this;
        accountAPI.getByID(pkID)
        .then(function(res){
            if(res.code == "0000"){
                 // 2. 赋值给修改表单数据
                 _this.showData = res.data;
            }
        });

        this.dialog.show = true;
    },
    // 操作栏-单行删除
    toDelete(pkID){

      // 当点击删除时提示询问是否进行删除
      this.$confirm('是否确定要删除该账号信息?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 当点击确定时
          
          // 调用删除方法进行删除
          this.submitDelete(pkID); 

        }).catch(() => { // 当点击取消时
          
        });

    },
    // 操作栏-解除锁定
    toUnlock(pkID){

       // 当点击删除时提示询问是否进行删除
       this.$confirm('是否确定要解锁该账号吗?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 当点击确定时
          
          // 调用删除方法进行删除
          this.submitUnlock(pkID); 

        }).catch(() => { // 当点击取消时
          
        });

    },
    // 进行密码修改
    toCahngePWD(pkID){

      // 1. 表单数据赋值
      this.changePWDFormData.accountID = pkID;

      // 2. 修改密码弹窗打开
      this.dialog.changePWD = true;
    },
    // 触发批量删除操作
    moreDelete(){

      // 1. 判断表格是否选中数据
      if(this.nowTableSelectedList.length<=0){
        this.$message.warning('请至少选择一行数据再操作！');
        return;
      }

      // 2. 问询
      this.$confirm('确定要删除这【'+this.nowTableSelectedList.length+'】行数据吗?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 当点击确定时
          
          let ids = "";

          for(var i in this.nowTableSelectedList){
            ids += this.nowTableSelectedList[i].accountID + ",";
          }

          // 调用删除方法进行删除
          this.submitDelete(ids.substring(0,ids.length-1));

        }).catch(() => { // 当点击取消时
          
        });

    },
    // 批量解锁功能
    moreUnlock(){
      // 1. 判断表格是否选中数据
      if(this.nowTableSelectedList.length<=0){
        this.$message.warning('请至少选择一行数据再操作！');
        return;
      }

      // 2. 问询
      this.$confirm('确定要解锁这【'+this.nowTableSelectedList.length+'】个账号吗?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { // 当点击确定时
          
          let ids = "";

          for(var i in this.nowTableSelectedList){
            ids += this.nowTableSelectedList[i].accountID + ",";
          }

          // 调用解锁方法进行
          this.submitUnlock(ids.substring(0,ids.length-1));

        }).catch(() => { // 当点击取消时
          
        });

    },
    // 当表格复选框选中变化时触发
    tableSelectChange(data){
      this.nowTableSelectedList = data;
    },
    // 菜单栏-点击更多操作项目触发回调
    moreMenuSelect(cm){ // 参数效果： unlock:主键
      // 1. 拆分指令
      let arr = cm.split(":");
      let methodName = arr[0];
      let pkID = arr[1];

      if(methodName == "changePWD"){ // 进行修改密码操作
        this.toCahngePWD(pkID);
      }else if(methodName == "unLock"){ // 解锁
        this.toUnlock(pkID);
      }

    },
    // 关闭修改密码弹窗
    changePwdFormClose(){
      this.dialog.changePWD = false;
      this.changePWDFormData = {
        accountID:null,
        oldPwd:null,
        newPwd:null,
        newPwd2:null
      }
    },
    // 重置修改密码表单
    changePwdFormRest(){
      this.changePWDFormData = {
        accountID:null,
        oldPwd:null,
        newPwd:null,
        newPwd2:null
      }
    },
    // 保存修改密码
    doSavePwdChange(){

        // 进行表单验证
        this.$refs.accountChangePWDForm.validate((valid) => {
          if (valid) {
            
            // 修改密码操作
            this.submitChangePWD();

          } else {
            return false;
          }
        });

    }
  }
};
</script>

<!-- CSS代码 -->
<style scoped></style>
